<template>
  <view class="">
    <view class="header" :style="{backgroundColor:`rgba(231, 231, 231,${transparency})`}">
      <view class="" :style="{height: statusbarHeight+'px'}">
      </view>
      <view class="flex">
        <view class="round"
              @click="getback"
              :style="{backgroundColor:`rgba(231, 231, 231,${1-transparency})`}">
          <uni-icons size="26" type="arrowleft"/>
        </view>
        <view class="nav">
          <view class="navitem" v-for="(item,index) in nav_list" :key="index"
                @click="changNavId(item)"
                :style="{color:nav_id!=item.id ? `rgba(25, 25, 25,${transparency})`
					: `rgba(241, 0, 0,${transparency})`  }"
          >
            {{ item.text }}
          </view>
        </view>
        <view class="round">
          <!--                          <uni-icons size="26" type="redo"/>-->
        </view>
      </view>
    </view>
    <scroll-view scroll-y=true style="height: 100vh;"
                 @scroll="scroll"
                 :scroll-top="scrollTop"
                 :scroll-into-view="scrollId"
                 scroll-with-animation="true">
      <!-- 商品 -->
      <view class="commodity">

        <!--        <swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#ff0000"-->
        <!--                circular @change="swiperChange">-->
        <!--          <swiper-item v-for="(item,index) in list" :key="index">-->
        <!--            <ImagePreview :image="item" mode="" :url="imgUrl" :classstyle="'width:100%;height:100%'"></ImagePreview>-->
        <!--          </swiper-item>-->
        <!--        </swiper>-->
        <ImagePreview :image="vehicleInfo.pic" mode="" :url="imgUrl"
                      :classstyle="{
          width:'100%',height:'100%'
                      }"></ImagePreview>


        <!--        <view class="counter" v-if="list">-->
        <!--          &lt;!&ndash;              <text>系统所选车辆型号及颜色仅供参考, 请以实际门店提供为准</text>&ndash;&gt;-->
        <!--          <text>{{ current + 1 }}/{{ list.length }}</text>-->
        <!--        </view>-->
      </view>

      <!-- 评价 -->
      <!--      <view class="evaluate box" :id="'scrollView'+nav_list[0].id">-->
      <!--        <view class="title">-->
      <!--          评价-->
      <!--        </view>-->
      <!--            </view>-->
      <!-- 详情 -->
      <view class="show box" :id="'scrollView'+nav_list[0].id">
        <view class="vehicle-box">
          <view class="vehicle-title">
            名称
          </view>
          <view class="vehicle-detail">
            {{ vehicleInfo.name }}
          </view>
        </view>
        <view>
          <uv-divider :dashed="true" text="车辆图片"/>
          <image-preview :image="imgItem" v-if="imgItem" :url="imgUrl" v-for="imgItem in list"
                         :classstyle="{width:'100%'}"></image-preview>
        </view>
        <view class="vehicle-title" style="text-align: center">
          图片仅供参考
        </view>

        <!--        <view class="vehicle-box" v-if="vehicleInfo.vehInsurancePic">-->
        <!--          <uv-divider :dashed="true" text="保险文件"/>-->
        <!--          <view class="file-show">-->
        <!--            <view @tap="openInsurance(item)"-->
        <!--                  v-for="(item,index) in file.fileUrl" :key="item"-->
        <!--                  class="view-filled">-->
        <!--              <image src="@/static/images/pdf.png" style="width: 90rpx;height:90rpx"/>-->
        <!--              <view class="name">{{ file.fileName[index] }}</view>-->
        <!--            </view>-->
        <!--            <uv-divider :dashed="true"/>-->
        <!--          </view>-->
        <!--        </view>-->
      </view>

      <view class="details box" :id="'scrollView'+nav_list[1].id">

        <view class="vehicle-box">
          <view class="vehicle-title">
            名称
          </view>
          <view class="vehicle-detail">
            {{ vehicleInfo.name }}
          </view>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                品牌
              </view>
              <view class="vehicle-detail">
                {{ vehicleInfo.gpsVinDetail.brand }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                型号
              </view>
              <view class="vehicle-detail">
                {{ vehicleInfo.gpsVinDetail.typename }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>

        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                长（mm）
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.len) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                宽（mm）
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.width) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                高（mm）
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.height) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                整备质量（kg）
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.weight) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                前制动类型
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.frontbraketype) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                后制动类型
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.rearbraketype) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                前轮胎尺寸
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.fronttiresize) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                后轮胎尺寸
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.reartiresize) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                能源
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.fueltype) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                汽车排量
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.displacement) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                气缸数(个)
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.cylindernum) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                油耗
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.comfuelconsumption) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                燃油型号
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.fuelgrade) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                供油方式
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.fuelmethod) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                排放标准
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.environmentalstandards) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                驻车制动类型
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.parkingbraketype) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                汽车类型
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.sizetype) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                核载人数
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.seatnum) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>

        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                发动机
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.engine) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                发动机型号
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.enginemodel) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>

        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                最大功率（kw）
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.maxpower) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                最大马力（Ps）
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.maxhorsepower) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>

        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                变速箱
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.gearbox) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                轴距（mm）
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.wheelbase) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="vehicle-box">
          <uni-row>
            <uni-col :span="12">
              <view class="vehicle-title">
                车身结构
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.bodystructure) }}
              </view>
            </uni-col>
            <uni-col :span="12">
              <view class="vehicle-title">
                驱动模式
              </view>
              <view class="vehicle-detail">
                {{ getInfo(vehicleInfo.gpsVinDetail.drivemode) }}
              </view>
            </uni-col>
          </uni-row>
          <uv-divider :dashed="true"/>
        </view>
        <view class="note">
          <!--                  长沙微巡服务平台提供技术支持与服务-->
        </view>
        <!--        <view class="vehicle-box">-->
        <!--          <view class="vehicle-title">-->
        <!--            日均价-->
        <!--          </view>-->
        <!--          <view class="vehicle-detail">-->
        <!--            ¥ {{ vehicleInfo.money }}/天-->
        <!--          </view>-->
        <!--          <uv-divider :dashed="true"/>-->
        <!--        </view>-->

      </view>

      <!-- 推荐 -->
      <!--      <view class="recommend box" :id="'scrollView'+nav_list[2].id">-->
      <!--        <view class="unit-box-title">-->
      <!--          <view style="width: 150rpx;height: 150rpx">-->
      <!--            <image-preview :image="vehicleInfo.wxAppLogo" :url="imgUrl"-->
      <!--                           :classstyle="'width:100%;height:100%'"></image-preview>-->
      <!--          </view>-->
      <!--          <view class="unit-text">{{ vehicleInfo.customerUnitName }}</view>-->
      <!--        </view>-->
      <!--        <view class="unit-box">-->
      <!--          <view class="unit-title">社会信用统一代码</view>-->
      <!--          <view class="unit-detail">{{ vehicleInfo.socialCreditCode }}</view>-->
      <!--          <uv-divider :dashed="true"/>-->
      <!--        </view>-->
      <!--        <view class="unit-box">-->
      <!--          <view class="unit-title">公司地址</view>-->
      <!--          <view class="unit-detail">{{ vehicleInfo.comAddress }}</view>-->
      <!--          <uv-divider :dashed="true"/>-->
      <!--        </view>-->
      <!--        <view class="unit-box">-->
      <!--          <view class="unit-title">门店名称</view>-->
      <!--          <view class="unit-detail">{{ vehicleInfo.shopName }}</view>-->
      <!--          <uv-divider :dashed="true"/>-->
      <!--        </view>-->
      <!--        <view class="unit-box">-->
      <!--          <view class="unit-title">门店联系电话</view>-->
      <!--          <view class="unit-detail">{{ vehicleInfo.shopTel }}-->
      <!--            <uni-icons type="phone" size="20" color="#3366cc" style="float: right"-->
      <!--                       @tap="lianxiphone(vehicleInfo.shopTel)"-->
      <!--            ></uni-icons>-->
      <!--          </view>-->
      <!--          <uv-divider :dashed="true"/>-->
      <!--        </view>-->

      <!--        <view class="unit-box">-->
      <!--          <view class="unit-title">营业执照</view>-->
      <!--          <view>-->
      <!--            <image-preview :image="vehicleInfo.compics" :url="imgUrl"/>-->
      <!--          </view>-->
      <!--        </view>-->


      <!--        <view class="note">长沙微巡服务平台提供技术支持与服务</view>-->
      <!--      </view>-->
    </scroll-view>

    <view class="right-box">
      <navigator url="/pages/home/home" open-type="reLaunch">
        <button class="tool">
          <uni-icons type="home" color="#007aff" size="18"/>
          <view>首页</view>
        </button>
      </navigator>
      <button class="tool" open-type="share">
        <uni-icons type="redo" color="#007aff" size="18"/>
        <view>转发</view>
      </button>
      <button class="tool" @click="jumpVehicle">
        <uni-icons type="cart" color="#007aff" size="18"/>
        <view>下单</view>
      </button>
    </view>
    <!--    <button type="primary" open-type="share"-->
    <!--            class="fixed-bottom">-->
    <!--      分享给好友-->
    <!--    </button>-->
  </view>
</template>

<script>
import {publicVehicleGoods} from "@/utils/api/basics";

export default {
  computed: {
    imgUrl() {
      return getApp().globalData.imgUrl
    }
  },
  onShareTimeline(res) {
    return {
      title: this.vehicleInfo.name,
      path: `/pagesA/product/productDetail?id=${this.code}`,
      imageUrl: this.imgUrl + this.vehicleInfo.pic,
    }
  },
  onShareAppMessage(res) {
    return {
      title: this.vehicleInfo.name,
      path: `/pagesA/product/productDetail?id=${this.code}`,
      imageUrl: this.imgUrl + this.vehicleInfo.pic,
      desc: this.vehicleInfo.name,
      content: this.vehicleInfo.name,
      success(res) {
        uni.showToast({
          title: '分享成功'
        })
      },
      fail(res) {
        uni.showToast({
          title: '分享失败',
          icon: 'none'
        })
      }
    }
  },
  data() {
    return {
      file: {
        fileUrl: [],
        fileName: []
      },
      current: 0,
      code: null,
      vehicleInfo: {},
      list: [{
        src: "https://picnew12.photophoto.cn/20180731/taobaohufupinlunboxuanchuanhaibao-30671462_1.jpg",
      },
        {
          src: "https://img1.baidu.com/it/u=3164785196,1911343538&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500",
        },
        {
          src: "https://img.zcool.cn/community/015beb5c212a71a80121df908e99ac.jpg?x-oss-process=image/resize,h_600/format,jpg",
        },
        {
          src: "https://img.zcool.cn/community/013add5779dc220000012e7e96dc60.jpg@2o.jpg",
        }

      ],
      statusbarHeight: uni.getSystemInfoSync().statusBarHeight,  //刘海屏高度
      scrollTop: 0,   //设置竖向滚动条位置
      nav_list: [
        //     {
        //   id: 1,
        //   text: '评价',
        //   scrollId: "scrollView1"
        // },
        {
          id: 1,
          text: '图片',
          scrollId: "scrollView1"
        },
        {
          id: 2,
          text: '参数',
          scrollId: "scrollView2"
        }
        // {
        //   id: 3,
        //   text: '商户',
        //   scrollId: "scrollView3"
        // }
      ],
      nav_id: null, //导航选中id
      scrollId: "",
      transparency: 0, //透明度
      isDropDown: false, //下拉到临界点
      //临界值(图片高度-头部高度-刘海屏高度 250-50-刘海屏高度)
      criticalValue: 200 - uni.getSystemInfoSync().statusBarHeight,
    }
  },
  // //页面滚动触发
  // onPageScroll(e) {
  // 	this.transparency = e.scrollTop/this.criticalValue
  // 	if(!this.isDropDown && e.scrollTop >=this.criticalValue){
  // 		this.isDropDown = true
  // 	}else if(this.isDropDown && e.scrollTop <this.criticalValue){
  // 		this.isDropDown = false

  // 	}
  // },
  methods: {
    jumpVehicle() {
      let datetimerange = [new Date().Format("yyyy-MM-dd"), new Date(new Date().getTime() + 24 * 60 * 60 * 1000).Format("yyyy-MM-dd")]

      uni.reLaunch({
        url: `/pagesA/product/product?id=${this.vehicleInfo.id}&datetimerange=${JSON.stringify(datetimerange)}`
      })
    },

    //微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
    openInsurance(urlPdf) {
      let url = this.imgUrl + urlPdf
      uni.showLoading({
        title: '正在加载中..'
      })
      uni.downloadFile({
        url: url,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              uni.hideLoading()
            },
          });
        },
        complete: function (r) {
          uni.hideLoading()
        }
      });
    },
    lianxiphone(phone) {
      console.log(phone);
      // 在某个事件处理函数中调用拨号功能
      uni.makePhoneCall({
        phoneNumber: phone, // 要拨打的电话号码
        success: function () {
          console.log('拨号成功');
        },
        fail: function (error) {
          console.error('拨号失败', error);
        },
      })
    },
    getInfo(info) {
      return info ? info : '无数据'
    },
    //scroll-view滚动触发
    scroll(e) {
      const scrollTop = e.detail.scrollTop
      this.calcSize()
      // 算上上边距+10
      const tabs = this.nav_list.filter(item => item.top <= scrollTop + 25).reverse();
      if (tabs.length > 0) {
        this.nav_id = tabs[0].id;
      }
      if (scrollTop < 45) {
        this.transparency = 0
      } else {
        this.transparency = (scrollTop / this.criticalValue).toFixed(2)
      }

      if (!this.isDropDown && e.detail.scrollTop >= this.criticalValue) {
        this.isDropDown = true
      } else if (this.isDropDown && e.detail.scrollTop < this.criticalValue) {
        this.isDropDown = false
        this.nav_id = null
      }
    },
    //计算高度
    calcSize(event) {
      let h = 0;
      this.nav_list.forEach(item => {
        let view = uni.createSelectorQuery().select(`#${item.scrollId}`);

        view.fields({
          size: true
        }, data => {

          if (data != null) {

            //加上图片高度 -(header+刘海屏)高度 +margin高度
            item.top = h + 250 - 50 - uni.getSystemInfoSync().statusBarHeight + 10 * item.id;
            h += data.height
            item.bottom = h;
          }

        }).exec();
      })

    },
    //点击头部标题
    changNavId(item) {
      if (!this.isDropDown) return
      this.nav_id = item.id
      //scroll-into-view滚动到指定view会有头部高度的误差 用scroll-top来取代
      // this.scrollId = item.scrollId
      this.nav_list.forEach(n => {
        if (n.id == item.id) {
          this.scrollTop = String(item.top)
        }

      })
    },
    //返回
    getback() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack()
      } else {
        uni.exitMiniProgram({
          success: () => {
            console.log('退出小程序成功');
            //this.$refs.privacyPopupShow.close()

          }
        });
      }

    },

    swiperChange(e) {
      this.current = e.detail.current
    },
    //分享
    share() {
      uni.showToast({
        title: '分享',
        icon: 'none',
        duration: 2000
      })
    },

  },
  onLoad(opt) {
    this.code = opt.id
    publicVehicleGoods(this.code).then(res => {
      if (res.data.code == 200) {
        let data = res.data.data
        data.gpsVinDetail = JSON.parse(data.gpsVinDetail)
        this.list = data.vehpics ? data.vehpics.split(',') : []
        if (data.vehInsurancePic) {
          this.file.fileUrl = data.vehInsurancePic.split(',')
        }

        if (data.vehInsuranceName) {
          this.file.fileName = data.vehInsuranceName.split(',')
        }
        this.vehicleInfo = data
        console.log(data, this.list)
      }
    })
  },

}
</script>
<style>
page {
  background-color: #e7e7e7;
}
</style>
<style lang="scss" scoped>

.header {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;

  .flex {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    width: 100%;
    height: 100rpx;

  }

  .nav {
    display: flex;
    align-items: center;

    .navitem {
      margin-left: 30px;
      font-size: 30rpx;
    }

    .navitem:first-child {
      margin-left: 0;
    }
  }

  .round {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    width: 70rpx;
    height: 70rpx;
  }
}

.commodity {
  width: 100%;
  height: 500rpx;
  position: relative;

  .swiper {
    width: 100%;
    height: 500rpx;
  }

  image {
    width: 100%;
    height: 500rpx;

  }

  .counter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 10%;
    left: 0;
    background-color: transparent;
    color: #fff;
    font-size: 24upx;
    padding: 0 30upx;
  }
}

.box {
  position: relative;
  top: -50rpx;
  margin-top: 20rpx;
  width: calc(100% - 20rpx);
  margin-left: 10rpx;
  border-radius: 20rpx;
  background-color: #fff;
  padding: 20rpx 10rpx;

  min-height: 400px;
}

.vehicle-box {
  padding: 0 15rpx;
  line-height: 40rpx;
}

//.vehicle-box:not(:last-child){
//  border-bottom: 1px dotted #858585;
//}


.unit-box-title {
  display: flex;
  padding: 0 20rpx;
  flex-direction: column;
  align-items: center;
}

.unit-box {
  padding: 20rpx;
}

.unit-title {
  font-size: 30rpx;
  color: #858585;
}

.unit-detail {
  font-size: 35rpx;
}

.unit-text {
  margin-top: 30rpx;
  font-size: 40rpx;
}

.vehicle-title {
  color: #858585;
  font-size: 25rpx;
}

.vehicle-detail {
  //color: #e60922;
  //color: #007aff;
  //color: #5677fc;
  font-size: 30rpx;
}

.fixed-bottom {
  position: fixed;
  bottom: 40rpx; // 距离顶部10px
  left: 40rpx; // 居中
  right: 40rpx;
  border-radius: 50px;
  width: 60%;
  animation: show-fiexd-bottom 1s normal;
  z-index: 20;
}

.note {
  color: #424242;
  font-size: 28rpx;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 100rpx 0 120rpx;
}

.file-show {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .view-filled {
    margin: 1rpx 20rpx;
    padding: 20rpx 10rpx;
    border-radius: 8px;
    border: 1px solid #eee;
    color: #999;
    text-align: center;
    font-size: 32rpx;
    height: 180rpx;
    align-items: center;
    position: relative;


    display: flex;
    flex-direction: row;

    .name {
      margin-left: 20upx;
      width: 80vw;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }


}

.right-box {
  bottom: 10vh;
  position: fixed;
  right: 2.5vw;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;

  .tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 16px;
    font-size: 10px;
    text-align: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1);
    padding: 0;
    //box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #999;
    border: 0;
    outline: none !important;
    -webkit-appearance: none; /* 去除 Safari 等浏览器的默认样式 */
    -moz-appearance: none; /* 去除 Firefox 浏览器的默认样式 */
    appearance: none; /* 去除所有浏览器的默认样式 */
  }

  .tool::after {
    border: none;
  }
}
</style>